<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item>
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        :beforeUpload="beforeUploadFn"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="home"></a-icon>
        </p>
        <p class="ant-upload-text">点击或将文件拖住到这里</p>
        <p class="ant-upload-hint">
        </p>
      </a-upload-dragger>
      </a-form-item>
      <a-form-item style="display: flex;justify-content: flex-end;margin-top: 10px">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  export default {
    name: 'Step1',
    data() {
      return {
        fileList: [],
        form: this.$form.createForm(this)
      }
    },
    methods: {
      nextStep() {
        const { form: { validateFields } } = this
        // 先校验，通过表单校验后，才进入下一步
        validateFields((err, values) => {
          if (!err) {
            this.$emit('nextStep')
          }
        })
      },
      beforeUploadFn(val){

      },
      handleChange({ file, fileList }) {
        this.fileList = fileList;
        this.uploadFiles( this.fileList)
      },
      uploadFiles(files) {
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
          formData.append('files', files[i]);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .step-form-style-desc {
    padding: 0 56px;
    color: rgba(0, 0, 0, .45);

    h3 {
      margin: 0 0 12px;
      color: rgba(0, 0, 0, .45);
      font-size: 16px;
      line-height: 32px;
    }

    h4 {
      margin: 0 0 4px;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
      line-height: 22px;
    }

    p {
      margin-top: 0;
      margin-bottom: 12px;
      line-height: 22px;
    }
  }
</style>
